<template>
  <div class="article-page">
    <front-header></front-header>
    
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
      <div class="leaf leaf-1"></div>
      <div class="leaf leaf-2"></div>
    </div>
    
    <div class="main-content">
      <!-- 页面标题 -->
      <div class="page-header">
        <div class="header-left">
          <h2>百货资讯</h2>
          <div class="article-count">共 {{ total }} 篇文章</div>
        </div>
        <div class="header-right">
          <el-input
            placeholder="搜索文章"
            prefix-icon="el-icon-search"
            v-model="searchKeyword"
            clearable
            @keyup.enter.native="handleSearch"
            @clear="handleClear"
            class="search-input">
          </el-input>
        </div>
      </div>

      <!-- 文章列表 -->
      <div class="article-container" v-loading="loading">
        <!-- 空状态提示 -->
        <el-empty v-if="!loading && articles.length === 0" :image-size="200" class="empty-article">
          <template slot="description">
            <div class="empty-text">
              <p class="main-text">暂无相关资讯</p>
              <p class="sub-text">敬请期待更多精彩内容</p>
            </div>
          </template>
        </el-empty>

        <!-- 文章列表 -->
        <div v-else class="article-list">
          <div v-for="article in articles" :key="article.id" class="article-card" @click="viewArticle(article)">
            <div class="article-cover">
              <el-image 
                :src="article.coverImage?.startsWith('http') ? article.coverImage : `/api${article.coverImage}`" 
                fit="cover"
                class="article-image">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <div class="article-details">
              <h3 class="article-title">{{ article.title }}</h3>
              <p class="article-summary">{{ article.summary }}</p>
              <div class="article-meta">
                <span class="view-count">
                  <i class="el-icon-view"></i>
                  {{ article.viewCount }} 阅读
                </span>
                <span class="publish-time">
                  <i class="el-icon-time"></i>
                  {{ formatTime(article.createdAt) }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination-wrapper" v-if="total > 0">
          <el-pagination
            background
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next, jumper"
            @current-change="getArticles">
          </el-pagination>
        </div>
      </div>
    </div>
    <front-footer></front-footer>

    <!-- 文章详情对话框 -->
    <el-dialog
      :title="currentArticle?.title"
      :visible.sync="dialogVisible"
      width="70%"
      class="article-dialog"
      custom-class="custom-dialog">
      <div class="article-content-wrapper">
        <div class="article-info">
          <span class="publish-time">
            <i class="el-icon-date"></i>
            发布时间：{{ formatTime(currentArticle?.createdAt) }}
          </span>
          <span class="view-count">
            <i class="el-icon-view"></i>
            {{ currentArticle?.viewCount }} 阅读
          </span>
        </div>
        <div class="article-full-content" v-html="currentArticle?.content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FrontHeader from '@/components/front/FrontHeader.vue'
import FrontFooter from '@/components/front/FrontFooter.vue'
import Request from '@/utils/request'
import { formatTime } from '@/utils/time'

export default {
  name: 'Article',
  components: {
    FrontHeader,
    FrontFooter
  },
  data() {
    return {
      loading: false,
      articles: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      currentArticle: null,
      searchKeyword: ''
    }
  },
  created() {
    this.getArticles()
  },
  methods: {
    formatTime,
    async getArticles() {
      this.loading = true
      try {
        const res = await Request.get('/article/page', {
          params: {
            currentPage: this.currentPage,
            size: this.pageSize,
            status: 1, // 只获取上架的文章
            title: this.searchKeyword || '' // 可选的标题搜索参数
          }
        })
        if (res.code === '0') {
          this.articles = res.data.records.map(article => ({
            id: article.id,
            title: article.title,
            content: article.content,
            summary: article.summary || this.generateSummary(article.content), // 如果没有摘要，从内容生成
            coverImage: article.coverImage,
            viewCount: article.viewCount,
            createdAt: article.createdAt,
            updatedAt: article.updatedAt
          }))
          this.total = res.data.total
        }
      } catch (error) {
        console.error('获取文章列表失败:', error)
      } finally {
        this.loading = false
      }
    },
    generateSummary(content) {
      // 移除HTML标签
      const plainText = content.replace(/<[^>]+>/g, '')
      // 取前100个字符作为摘要
      return plainText.substring(0, 100) + (plainText.length > 100 ? '...' : '')
    },
    async viewArticle(article) {
      this.$router.push(`/article/${article.id}`)
    },
    handleSearch() {
      this.currentPage = 1
      this.getArticles()
    },
    handleClear() {
      this.searchKeyword = ''
      this.currentPage = 1
      this.getArticles()
    }
  }
}
</script>

<style scoped>
.article-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%);
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.1), rgba(255, 193, 7, 0.05));
}

.circle-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -100px;
}

.circle-2 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  left: -100px;
}

.circle-3 {
  width: 300px;
  height: 300px;
  top: 40%;
  right: 10%;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.05), rgba(255, 152, 0, 0.08));
}

.leaf {
  position: absolute;
  background-color: rgba(255, 152, 0, 0.1);
  border-radius: 50% 0;
  transform: rotate(45deg);
}

.leaf-1 {
  width: 200px;
  height: 200px;
  bottom: 10%;
  right: 5%;
}

.leaf-2 {
  width: 150px;
  height: 150px;
  top: 20%;
  left: 5%;
  transform: rotate(-30deg);
}

.main-content {
  flex: 1;
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* 页面标题样式 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-header h2 {
  font-size: 28px;
  font-weight: 600;
  color: #F57C00;
  margin: 0;
  position: relative;
}

.article-count {
  color: #FF9800;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255, 193, 7, 0.1);
  padding: 6px 16px;
  border-radius: 20px;
}

.search-input {
  width: 240px;
}

.search-input :deep(.el-input__inner) {
  border-radius: 20px;
  border-color: rgba(255, 193, 7, 0.2);
}

.search-input :deep(.el-input__inner:focus) {
  border-color: #FF9800;
}

.search-input :deep(.el-input__prefix) {
  color: #FF9800;
}

/* 文章容器 */
.article-container {
  min-height: 400px;
  position: relative;
}

/* 文章列表样式 */
.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.article-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 193, 7, 0.1);
  transition: all 0.3s;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 152, 0, 0.1);
}

.article-cover {
  position: relative;
  overflow: hidden;
}

.article-image {
  width: 100%;
  height: 200px;
  transition: all 0.5s ease;
}

.article-card:hover .article-image {
  transform: scale(1.05);
}

.article-details {
  padding: 20px;
}

.article-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #F57C00;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color 0.3s ease;
}

.article-card:hover .article-title {
  color: #FF9800;
}

.article-summary {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  opacity: 0.9;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 193, 7, 0.1);
}

.view-count, .publish-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.view-count i, .publish-time i {
  color: #FF9800;
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  padding: 20px 0;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background: linear-gradient(135deg, #FF9800, #FFC107);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
  color: #FF9800;
}

/* 文章详情对话框样式 */
:deep(.custom-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

:deep(.custom-dialog .el-dialog__header) {
  background: linear-gradient(to right, #FF9800, #FFC107);
  padding: 16px 20px;
  color: white;
}

:deep(.custom-dialog .el-dialog__title) {
  color: white;
  font-weight: 500;
}

:deep(.custom-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: rgba(255, 255, 255, 0.9);
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

/* 自定义滚动条样式 */
:deep(.el-dialog__body::-webkit-scrollbar) {
  width: 6px;
}

:deep(.el-dialog__body::-webkit-scrollbar-thumb) {
  background: rgba(255, 152, 0, 0.3);
  border-radius: 3px;
}

:deep(.el-dialog__body::-webkit-scrollbar-track) {
  background: transparent;
}

.article-content-wrapper {
  position: relative;
}

.article-info {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 193, 7, 0.1);
  color: #606266;
  font-size: 14px;
  background: rgba(255, 193, 7, 0.05);
  padding: 16px 20px;
  border-radius: 12px;
}

.article-full-content {
  line-height: 1.8;
  color: #303133;
  font-size: 16px;
  padding: 0 20px;
}

.article-full-content :deep(img) {
  max-width: 100%;
  border-radius: 8px;
  margin: 16px 0;
}

.article-full-content :deep(h1),
.article-full-content :deep(h2),
.article-full-content :deep(h3) {
  color: #F57C00;
  margin-top: 24px;
}

.article-full-content :deep(a) {
  color: #FF9800;
  text-decoration: none;
}

.article-full-content :deep(a:hover) {
  text-decoration: underline;
}

.article-full-content :deep(blockquote) {
  border-left: 4px solid #FFC107;
  padding-left: 16px;
  color: #606266;
  margin: 16px 0;
  font-style: italic;
}

/* 空状态样式 */
.empty-article {
  padding: 60px 0;
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(255, 193, 7, 0.1);
}

.empty-text {
  margin: 16px 0;
}

.empty-text .main-text {
  font-size: 18px;
  color: #F57C00;
  margin-bottom: 8px;
}

.empty-text .sub-text {
  font-size: 14px;
  color: #606266;
}

:deep(.el-empty__image) {
  opacity: 0.8;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .header-right {
    width: 100%;
  }

  .search-input {
    width: 100%;
  }

  .article-list {
    grid-template-columns: 1fr;
  }

  .article-image {
    height: 180px;
  }
}
</style>